<template>
  <div>
    <!-- 查询表单 -->
    <div class="check-form-box">
      <el-form
        :inline="true"
        :model="searchModel.data"
        class="demo-form-inline"
      >
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchModel.createDate"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="关联id">
          <el-input
            v-model.trim="searchModel.relevanceId"
            placeholder="请输入订单id"
          />
        </el-form-item>
        <el-form-item label="领取状态">
          <el-select
            v-model="searchModel.receiveState"
            placeholder="请选择领取状态"
          >
            <el-option label="全部" :value="null" />
            <el-option label="未领取" value="0" />
            <el-option label="已领取" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="奖励类型">
          <el-select
            v-model="searchModel.rewardType"
            placeholder="请选择奖励类型"
          >
            <el-option label="全部" :value="null" />
            <el-option
              v-for="item in pinia.allDic?.reward_middle_reward_type?.dicList"
              :key="item.dicId"
              :label="item.dicName"
              :value="item.dicValue"
            />
            <!-- <el-option label="通行" value="1" />
            <el-option label="套餐定时返" value="2" />
            <el-option label="美团订单" value="3" />
            <el-option label="新用户奖励" value="4" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model.trim="searchModel.userId"
            :formatter="(value) => value.replace(/[^\d]/g, '')"
            placeholder="请输入用户ID"
          />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select
            v-model="searchModel.userType"
            placeholder="请选择用户类型"
          >
            <el-option label="全部" :value="null" />
            <el-option label="车主用户" value="1" />
            <el-option label="代理商" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <template v-slot:default="scope">
            <el-button type="primary" color="#ea5b24" @click="searchOrder()"
              >查询</el-button
            >
          </template>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表 -->
    <div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="id" label="订单id" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="userId" label="用户id" />
        <el-table-column
          prop="userType"
          :formatter="judgeUserType"
          label="用户类型"
        />
        <el-table-column prop="expectedRewardPrice" label="预计奖励金额" />
        <el-table-column prop="price" label="实际奖励金额" />
        <el-table-column
          prop="receiveState"
          :formatter="judgeReceiveState"
          label="领取状态"
        />
        <el-table-column prop="relevanceId" label="关联id" />
        <el-table-column
          prop="rewardType"
          :formatter="judgeRewardType"
          label="奖励类型"
        />
        <el-table-column prop="updateTime" label="更新时间" />
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { findRewarOrderApi } from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  findOrder(flipData);
};

// 判断用户类型显示
const judgeUserType = (row) => {
  switch (row.userType) {
    case 1:
      return "车主";
    case 2:
      return "代理商";
    default:
      return "";
  }
};

// 判断奖励类型显示
const judgeRewardType = (row) => {
  let str = "";
  pinia.allDic?.reward_middle_reward_type?.dicList.forEach((item) => {
    if (item.dicValue == row.rewardType) {
      str = item.dicName;
      return;
    }
  });
  return str;
  // switch (row.rewardType) {
  //   case 1:
  //     return "通行";
  //   case 2:
  //     return "套餐定时返";
  //   case 3:
  //     return "美团订单";
  //   case 4:
  //     return "新用户奖励";
  //   default:
  //     return "";
  // }
};

// 判断领取状态显示
const judgeReceiveState = (row) => {
  switch (row.receiveState) {
    case 0:
      return "未领取";
    case 1:
      return "已领取";
    default:
      return "";
  }
};

// 搜索模型
const searchModel: any = reactive({
  relevanceId: null,
  receiveState: null,
  rewardType: null,
  userId: null,
  createDate: null,
  startTime: null,
  endTime: null,
  page: page,
  size: size,
});

// 搜索奖励订单
const searchOrder = () => {
  page.value = 1;
  if (searchModel.createDate) {
    searchModel.startTime = formatDateTime(searchModel.createDate[0]);
    searchModel.endTime = formatDateTime(searchModel.createDate[1]).replace(
      "00:00:00",
      "23:59:59"
    );
  } else {
    searchModel.startTime = null;
    searchModel.endTime = null;
  }
  searchParmSearch();
  findOrder(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// 查询奖励订单
const findOrder = (searchModel) => {
  searchModel.passNo != null
    ? (searchModel.passNo = Number(searchModel.passNo))
    : false;
  findRewarOrderApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.pager.data;
      totalNum.value = res.data.data.pager.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};
// 奖励参数
const refundParam = reactive({
  refundTableId: null,
  reason: null,
});

onMounted(() => {
  findOrder(searchModel);
});
</script>

<style scoped>
:deep(.demo-form-inline) {
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 25%);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item) {
  width: 90%;
}
</style>
